<template>
  <div class="prove p-2">
    <el-card>
      <div class="mb-[10px]">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
          <el-form-item label="创建时间" style="width: 458px">
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="企业名称" prop="busMerName">
            <el-input v-model="queryParams.busMerName" placeholder="请输入企业名称" clearable style="width: 340px" />
          </el-form-item>
          <el-form-item label="服务商名称" label-width="100" prop="synName">
            <el-input v-model="queryParams.synName" placeholder="请输入服务商名称" clearable style="width: 340px" />
          </el-form-item>
          <el-form-item label="完税证明上传状态" prop="wsZmStatus" label-width="125">
            <el-select v-model="queryParams.wsZmStatus" placeholder="请选择完税证明上传状态" clearable style="width: 340px">
              <el-option v-for="dict in wszm_upload_status" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  @click="handleQuery" icon="Search">搜索</el-button>
            <el-button type="primary"  @click="resetQuery" icon="Refresh">重置</el-button>

            <!-- 
            <a class="btn-nav">
              <span
                >高级模式
                <i data-v-771b1fc0="" aria-label="图标: down" class="anticon anticon-down"
                  ><svg
                    viewBox="64 64 896 896"
                    data-icon="down"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                  >
                    <path
                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                    ></path></svg></i
              ></span>
              <span
                >精简模式
                <i data-v-771b1fc0="" aria-label="图标: up" class="anticon anticon-up"
                  ><svg
                    viewBox="64 64 896 896"
                    data-icon="up"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                  >
                    <path
                      d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
                    ></path></svg></i
              ></span>
            </a>-->
          </el-form-item>
        </el-form>
      </div>

      <div>
        <el-table ref="roleTableRef" v-loading="loading" border :data="roleList">
          <el-table-column label="创建时间" align="center" prop="createTime" width="180" sortable />
          <el-table-column label="日期" align="center" prop="month" width="100" />
          <el-table-column label="企业名称" align="center" prop="merName" show-overflow-tooltip width="200" />
          <el-table-column label="服务商名称" align="center" prop="sydName" show-overflow-tooltip width="200" />
          <el-table-column label="开票流水号" align="center" prop="invoiceNos" width="160" class-name="ellipsis-cell">
            <template #default="scope">
              <el-popover  :width="210" trigger="hover">
                <template #reference>
                  <el-link type="primary">
                    <div line-clamp="1" truncated>
                      {{ scope.row.invoiceNos }}
                    </div>
                  </el-link>
                </template>
                <el-space direction="vertical">
                  <el-link type="primary" v-for="(item, index) in getHtmlContent1(scope.row.invoiceNos)" :key="index">
                    <div line-clamp="1" truncated @click="invItemClick(item)">
                      {{ item }}
                    </div>
                  </el-link>
                </el-space>
              </el-popover>
              
              <!-- 
                <el-tooltip :content="getHtmlContent1(scope.row.invoiceNos)" raw-content placement="bottom" effect="light">
                  <el-link type="primary">
                    <div line-clamp="1" truncated>
                      {{ scope.row.invoiceNos }}
                    </div>
                  </el-link>
                </el-tooltip>
              -->
            </template>
          </el-table-column>
          <el-table-column label="批次流水号" align="center" prop="billNos"   width="160"  class-name="ellipsis-cell">
            <template #default="scope">
              <el-popover  :width="170" trigger="hover">
                <template #reference>
                  <el-link type="primary">
                    <div line-clamp="1" truncated>
                      {{ scope.row.billNos }}
                    </div>
                  </el-link>
                </template>
                <el-space direction="vertical">
                  <el-link type="primary" v-for="(item, index) in getHtmlContent1(scope.row.billNos)" :key="index">
                    <div line-clamp="1" truncated @click="billItemClick(item)">
                      {{ item }}
                    </div>
                  </el-link>
                </el-space>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="完税证明" align="center" prop="taxStatus" width="90" >
            <template #default="scope">
              <dict-tag :options="wszm_upload_status" :value="scope.row.taxStatus" />
            </template>
          </el-table-column>
          <el-table-column label="报税金额汇总" align="center" width="280">
            <template #default="scope">
              <el-link type="primary" @click="txDetail(scope.row)">查询报税汇总金额</el-link>
              <el-divider direction="vertical" /> 
              <el-link type="primary" @click="exportDetail(scope.row)">下载报税汇总金额</el-link>
            </template>
          </el-table-column>
          <el-table-column label="身份证信息" align="center" width="140">
            <template #default="scope">
              <el-link type="primary" @click="downloadPay(scope.row,'card')" :disabled="scope.row.cardDisable">{{scope.row.cardTitle || '下载身份证'}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="电子合同" align="center" width="150">
            <template #default="scope">
              <el-link type="primary" @click="downloadPay(scope.row,'ht')" :disabled="scope.row.htDisable">{{scope.row.htTitle || '下载电子合同'}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="支付凭证" align="center" width="140">
            <template #default="scope">
              <el-link type="primary" @click="downloadPay(scope.row,'pay')" :disabled="scope.row.payDisable">{{!scope.row.payTitle?'下载支付凭证':scope.row.payTitle}}</el-link>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" prop="roleName" width="130"> 
            <template #default="scope">
              <el-tag type="primary" style="cursor: pointer;" @click="downloadWsFile(scope.row)">下载完税证明</el-tag>
              <!-- -->
              <el-tag type="success" style="cursor: pointer;" @click="uploadWsFile(scope.row)" v-hasPermi="['taxRecords:taxRecords:edit']" >上传完税证明</el-tag>
            </template>
          </el-table-column>
        </el-table> 
        <div class="demo-pagination-block mt-[20px]">
          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </el-card>
    <UploadWs ref="uploadWs" :openCheck="openCheck" @dialogClose="dialogClose" @dialogSubmit="dialogSubmit" :item="item"></UploadWs>
    <TaxSummary :openCheck="txOpenCheck" @dialogClose="txDialogClose" :item="txItem"></TaxSummary>

    <BillDetail :openCheck="bdOpenCheck" @dialogClose="bdDialogClose" :item="bdItem"></BillDetail>
    <InvDetail :openCheck="inOpenCheck" @dialogClose="inDialogClose" :item="inItem"></InvDetail>

  </div>
</template>
<script setup name="prove" lang="ts">
import { RoleForm, RoleQuery, RoleVO } from '@/api/system/role/types';
import { useTransition } from '@vueuse/core'
import { ref , toRefs , reactive} from 'vue';
import UploadWs from "./subComp/uploadWs.vue"
import TaxSummary from "@/views/sw/prove/subComp/taxSummary.vue"
import BillDetail from "@/views/sw/prove/subComp/billDetail.vue"
import InvDetail from "@/views/sw/prove/subComp/invDetail.vue"
import {taxRecordslist,submitTaxRecords,downLoadSfz,downLoadHt,downLoadPayCer} from "@/api/sw/index"

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const uploadWs =ref();

const {wszm_upload_status}  =  toRefs<any>(proxy?.useDict('wszm_upload_status'));
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const loading = ref(false);
const total = ref(0)
const item = ref({})
const openCheck = ref(false);
const txOpenCheck = ref(false)
const inOpenCheck = ref(false)
const bdOpenCheck = ref(false)
const txItem = ref({});
const bdItem = ref({});
const inItem = ref({});

const queryFormRef = ref();
const queryParams = ref({
    startTime:'',
    endTime:'',
    busMerName:"",
    synName:'',
    wsZmStatus:'',    
    pageSize:10,
    pageNum:1
 });

// 表单数据用例
// const roleList = ref<RoleVO[]>();
const roleList = ref([
  {
    date: '2024-05-01 05:10:16',
    date2: '2024-04',
    name: '王小虎',
    roleText:'已上传',
    roleName2: 'T2024042508533349697820<br/>T2024042508533349697820<br/>T2024042508533349697820',
    address: '上海市普陀区金沙江路 1518 弄',
    address4: '上海市普陀区金沙江路 1518 弄',
    address5: '上海市普陀区金沙江路 1518 弄',
    address6: '上海市普陀区金沙江路 1518 弄',
    address7: '上海市普陀区金沙江路 1518 弄',
    address8: '上海市普陀区金沙江路 1518 弄',
    address9: '上海市普陀区金沙江路 1518 弄',
    address10: '上海市普陀区金沙江路 1518 弄',
    address11: '上海市普陀区金沙江路 1518 弄',
    address12: '上海市普陀区金沙江路 1518 弄',
    roleName: '上海市'
  }
]);


const invItemClick= (item:any)=>{
  inOpenCheck.value = true;
  inItem.value = {
    no:item
  }
}


const billItemClick = (item:any)=>{
  bdOpenCheck.value = true;
  bdItem.value ={
    no:item
  }
}

const downLoadSfz1 = (row:any)=>{
    downLoadSfz({
      trId:row.id
    }).then(res=>{
      if(res.data.isUrl == 1){
          dlFile(res.data.url,"身份证下载");
        }else{
          proxy?.$modal.msgSuccess(res.data.msg);
        }
    })
}

const downLoadHt1 = (row:any)=>{
  downLoadHt({
      trId:row.id
    }).then(res=>{
      if(res.data.isUrl == 1){
          dlFile(res.data.url,"合同下载");
        }else{
          proxy?.$modal.msgSuccess(res.data.msg);
        }
    })
}

const downLoadPayCer1 = (row:any)=>{
  downLoadPayCer({
      trId:row.id
    }).then(res=>{
      if(res.data.isUrl == 1){
          dlFile(res.data.url,"支付凭证下载");
        }else{
          proxy?.$modal.msgSuccess(res.data.msg);
        }
    })
}


const downloadPay = (row:any,type:String)=>{
  row[type+'Disable'] = true;
  row[type+'countdown'] = 60;
  row[type+'Title'] = 60+"秒后重新获取";
  row[type+'TimeInterval'] = setInterval(() => {
      row[type+'countdown']--;
      row[type+'Title'] = row[type+'countdown'] +'秒后重新获取';
          if (row[type+'countdown'] <= 0) {
            clearInterval(row[type+'TimeInterval']);
            row[type+'Disable'] = false;
            row[type+'Title'] = null;
          }
        }, 1000);
  if(type == "card"){
    downLoadSfz1(row)
  }else if(type == "ht"){
    downLoadHt1(row);
  }else if(type == "pay"){
    downLoadPayCer1(row);
  }
}

const txDialogClose = ()=>{
  txOpenCheck.value = false;
}

const bdDialogClose = ()=>{
  bdOpenCheck.value = false;
}

const inDialogClose = ()=>{
  inOpenCheck.value = false;
}
//
const txDetail = (row:any)=>{
  txOpenCheck.value = true;
  txItem.value = row;
}

const getList = ()=>{
  loading.value = true;
  taxRecordslist(queryParams.value).then(res => {
    roleList.value = res.rows
      total.value = res.total
      loading.value = false
    });
}



//提交完税证明
const dialogSubmit = (params:any)=>{
    submitTaxRecords({
      id:params.id,
      taxFile:params.file,
      taxRemark:params.remarer
    }).then((res:any)=>{
       proxy?.$modal.msgSuccess("上传成功");
       openCheck.value = false;
       getList();
    }).finally(()=>{
      uploadWs.value.hideLoad();
    });
}


const getHtmlContent1 = (con:any)=>{
  if(!con){
    return [];
  }
  return con.split(",");
}

const uploadWsFile = (row:any)=>{
  openCheck.value = true;
  item.value = {
    id:row.id
  }
}

const dialogClose = ()=>{

  openCheck.value = false;

}

const itemClick = (item:any)=>{
  alert(item)
}

const getHtmlContent = (con:any)=>{

   let contentList = [];
   contentList.push("<a style='text-decoration: underline; display: block;'>T2024042508533349697820</a>")
   contentList.push("<a style='text-decoration: underline; display: block;'>T2024042508533349697820</a>")
   contentList.push("<a style='text-decoration: underline; display: block;'>T2024042508533349697820</a>")
   contentList.push("<a style='text-decoration: underline; display: block;'>T2024042508533349697820</a>")
   contentList.push("<a style='text-decoration: underline; display: block;'>T2024042508533349697820</a>")
  return contentList.join(" ");
}
// 完税证明上传状态选择
const sys_normal_disable = ref([
  {
    value: '未上传',
    label: '未上传'
  },
  {
    value: '已上传',
    label: '已上传'
  }
]);

//下载完税证明
const downloadWsFile = (row:any)=>{
    if(!row.taxFile){
        proxy?.$modal.msgError(`未上传完税证明!`);
        return 
    }else{
      dlFile(row.taxFile,"完税证明");
    }
}

const exportDetail =(row:any)=>{
  proxy?.download("/payment/taxRecordsDetail/export", {
    trId:row.id,
  }, `报税汇总金额_${new Date().getTime()}.xlsx`);
}


//下载
const dlFile = (url:string,type:string)=>{
  let extension = proxy?.getExtension(url);
  proxy?.download("/resource/oss/dlurl", {
    url:url,
  }, `${type}_${new Date().getTime()}.${extension?extension:''}`);
}

// 分页数据用例
const pageSize4 = ref(10);
const currentPage4 = ref(1);
// 倒计时用例 
const countdowndz = ref(60)
const outputValue = useTransition(countdowndz, {
  duration: 60000,
})
countdowndz.value = 0
const staticticStyle = ref({
  color:'#999',
  fontSize:'13px'
});


 /**  查询 */
 const handleQuery = ()=>{
  queryParams.value.pageNum = 1;
  getList();
    }


    /** 重置按钮操作 */
    const resetQuery = () => {
      dateRange.value = ['', '']
      queryFormRef.value?.resetFields();
      queryParams.value.pageNum = 1;
    }
  
  

onMounted(() => {
    getList();
});

</script>
<style lang="scss" scoped>


.ellipsis-cell .cell {  
  /* 注意：.cell 是 Element UI 表格单元格的默认类名 */  
  display: inline-block; /* 或者 block，取决于你的需求 */  
  width: 100%; /* 确保宽度与列宽一致 */  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap; /* 防止文本换行 */  
} 

.prove {
  background-color: #eef0f3;
  .flexdown{
    display: flex;
    align-items: center;
    color: #999999;
  font-size: 13px;
    justify-content:center;
  }
  .demo-pagination-block {
    float: right;
    padding-bottom: 20px;
  }
  .btn-nav {
    margin-left: 8px;
    & {
      color: #1890ff;
      text-decoration: none;
      background-color: transparent;
      outline: none;
      cursor: pointer;
      transition: color 0.3s;
    }
    .anticon {
      display: inline-block;
      color: inherit;
      font-style: normal;
      line-height: 0;
      text-align: center;
      text-transform: none;
      vertical-align: -0.125em;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
  }
}
</style>